﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Serail Passthrough Tool</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100vh;
            background-color: #f7f7ff;
        }

        div {
            height: calc(100% - 4rem);
            padding: 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 2rem 1fr;
            row-gap: 1rem;
            column-gap: 2rem;
        }

        div_child {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 2rem 0fr;
            row-gap: 1rem;
            column-gap: 2rem;
        }

        textarea {
            resize: none;
            overflow-y: scroll;
            overflow-x: hidden;
            padding: 1rem;
        }
    </style>
    <script>
        function getBroswer() {
            var sys = {};
            var ua = navigator.userAgent.toLowerCase();
            var s;
            (s = ua.match(/edge\/([\d.]+)/)) ? sys.edge = s[1] :
                (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1] :
                    (s = ua.match(/msie ([\d.]+)/)) ? sys.ie = s[1] :
                        (s = ua.match(/firefox\/([\d.]+)/)) ? sys.firefox = s[1] :
                            (s = ua.match(/chrome\/([\d.]+)/)) ? sys.chrome = s[1] :
                                (s = ua.match(/opera.([\d.]+)/)) ? sys.opera = s[1] :
                                    (s = ua.match(/version\/([\d.]+).*safari/)) ? sys.safari = s[1] : 0;

            if (sys.edge) return { broswer: "Edge", version: sys.edge };
            if (sys.ie) return { broswer: "IE", version: sys.ie };
            if (sys.firefox) return { broswer: "Firefox", version: sys.firefox };
            if (sys.chrome) return { broswer: "Chrome", version: sys.chrome };
            if (sys.opera) return { broswer: "Opera", version: sys.opera };
            if (sys.safari) return { broswer: "Safari", version: sys.safari };

            return { broswer: "", version: "0" };
        }
        if (!('serial' in navigator)) {
            alert('当前浏览器不支持 Web Serial API串口操作,请更换Edge或Chrome浏览器')
        } else {
            var abc = getBroswer();
            alert("broswer:" + abc.broswer + " version:" + abc.version)
        }
    </script>
</head>

<body>
    <div>
        <div_child>
            <button id="btnOpen">open</button>
            <button id="btnClose">close</button>
        </div_child>
    </div>
    <script>
        const btnOpen = document.querySelector("#btnOpen");
        const btnClose = document.querySelector("#btnClose");

        // 发送数据相关操作
        btnOpen.onclick = async () => {
        };

        // 清空数据接收窗口
        btnClose.onclick = () => {

        };
    </script>
</body>
</html>